@import "~scss/variables";

$sw-context-menu-color-background-hover: lighten($color-shopware-brand-500, 40%);
$sw-context-menu-color-text: $color-darkgray-200;
$sw-context-menu-color-active: $color-shopware-brand-500;
$sw-context-menu-color-danger: $color-crimson-500;
$sw-context-menu-color-success: $color-emerald-500;
$sw-context-menu-color-warning: $color-pumpkin-spice-500;

.sw-context-menu-item {
    display: block;
    position: relative;
    border-radius: $border-radius-default;
    margin: 0;
    width: 100%;
    text-align: start;
    line-height: $line-height-xs;
    padding: 4px 14px;
    text-decoration: none;
    color: $sw-context-menu-color-text;
    outline: none;
    cursor: pointer;

    &.sw-context-menu-item--icon {
        display: grid;
        grid-template-columns: 16px auto;
        align-items: center;
        justify-items: stretch;
        justify-content: stretch;
        grid-gap: 12px;
    }

    &:hover {
        background: $sw-context-menu-color-background-hover;
        color: $sw-context-menu-color-active;

        .mt-icon {
            color: $sw-context-menu-color-active;
        }
    }

    &.sw-context-menu-item--danger {
        color: $sw-context-menu-color-danger;

        .mt-icon {
            color: $sw-context-menu-color-danger;
        }

        &:hover {
            background: lighten($sw-context-menu-color-danger, 42%);

            &.is--disabled {
                color: $sw-context-menu-color-danger;
            }
        }
    }

    &.sw-context-menu-item--success {
        color: $sw-context-menu-color-success;

        .mt-icon {
            color: $sw-context-menu-color-success;
        }

        &:hover {
            background: lighten($sw-context-menu-color-success, 42%);

            &.is--disabled {
                color: $sw-context-menu-color-success;
            }
        }
    }

    &.sw-context-menu-item--warning {
        color: $sw-context-menu-color-warning;

        .mt-icon {
            color: $sw-context-menu-color-warning;
        }

        &:hover {
            background: lighten($sw-context-menu-color-warning, 25%);

            &.is--disabled {
                color: $sw-context-menu-color-warning;
            }
        }
    }

    &.sw-context-menu-item--headline {
        font-weight: $font-weight-semi-bold;
        cursor: default;

        &:hover {
            color: $sw-context-menu-color-text;
            background: 0 none;
        }
    }

    &.is--disabled {
        opacity: 0.5;
        cursor: not-allowed;
        user-select: none;

        &:hover {
            color: $sw-context-menu-color-text;
            background: 0 none;
        }

        .mt-icon {
            color: $sw-context-menu-color-text;
        }
    }

    & > .mt-icon {
        color: $sw-context-menu-color-text;
    }
}
